<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
    <table id="demo" lay-filter="test"></table>
    <script type="text/html" id="addForm">
        <form class="layui-form" action="" lay-filter="addForm">
            <div class="layui-form-item">
                <label class="layui-form-label">科室名字</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="text" name="sectionName" required  lay-verify="required" placeholder="请输入科室名字" autocomplete="off" class="layui-input">
                </div>
            </div><div class="layui-form-item">
            <label class="layui-form-label">科室电话</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="sectionMobile" required  lay-verify="required" placeholder="请输入科室电话" autocomplete="off" class="layui-input">
            </div>
        </div>
            <div class="layui-form-item">
                <label class="layui-form-label">科室地址</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="text" name="sectionAddress" required  lay-verify="required" placeholder="请输入科室地址" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="go">添加</button>
                    <button type="button" class="layui-btn layui-btn-warm" id="add-form-cancel">
                        取消</button>
                </div>
            </div>
        </form>
    </script>
    <script id="updateForm" type="text/html">
        <form class="layui-form" action="" lay-filter="updateForm">
            <input type="hidden" name="sectionId">
            <div class="layui-form-item">
                <label class="layui-form-label">科室名字</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="text" name="sectionName" required  lay-verify="required" placeholder="请输入科室名字" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">科室电话</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="text" name="sectionMobile" required  lay-verify="required" placeholder="请输入科室电话" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">科室地址</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="text" name="sectionAddress" required  lay-verify="required" placeholder="请输入科室地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="width:200px">
                    <button type="submit" class=" layui-btn" lay-submit lay-filter="update-go" style="width:80px">更新</button>
                    <button type="button" class=" layui-btn" id="update-form-cancel" style="width:80px">取消</button>
                </div>
            </div>
        </form>
    </script>
<script type="text/javascript">
    layui.use(["table","layer","form"],function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        table.render({
            elem:"#demo",
            url:"/work1/sections",
            page:true,
            cols:[[
                {type:"checkbox"},
                {field:"sectionId",title:"编号",sort:true},
                {field:"sectionName",title:"科室名字"},
                {field:"sectionMobile",title:"科室电话"},
                {field:"sectionAddress",title:"科室地址"},
                {title:"操作",toolbar:"#operation"}//操作列
            ]],
            limits:[5,10,20],
            limit:5,
            toolbar:"#toolbar"
        });

        //监听lay-filter为test的表格的工具按钮被单击的事件
        table.on("tool(test)",function(obj){
            console.log(obj);
            //如果是更新操作
            if(obj.event =="edit"){
                layer.open({
                    type:1,
                    content:$("#updateForm").html(),
                    success:function(layerObj,index){
                        //手动渲染更新表单中单选按钮和日期组件
                        form.render("radio","updateForm");
                        // laydate.render({
                        //     elem:"#update-birthday",
                        //     type:"datetime",//控件选择类型 year month date time datetime
                        //     format:"yyyy-MM-dd HH:mm:ss",//日期格式
                        //     value:new Date(),//初始值
                        //     trigger: 'click'//触发方式
                        // })

                        //回显表单数据
                        console.log(obj.data);//要更新的那行的原始数据
                        form.val("updateForm",obj.data);


                        //监听更新表单的提交事件
                        form.on("submit(update-go)",function(data){
                            //当更新表单,提交数据的时候,执行当前行数 data.field获取到更新表单最新的数据
                            console.log(data.field);
                            var table = layui.table;
                            $.ajax({
                                url:"/work1/sections/"+data.field.sectionId,
                                type:"put",
                                data:JSON.stringify(data.field),
                                contentType:"application/json",
                                dataType:"json",
                                success:function(result){
                                    //如果更新成功,关闭弹出层,刷新表格
                                    if (result.status == "success") {

                                        layer.close(index);
                                        layer.msg("更新成功",function(){
                                            table.reload("demo");
                                        })

                                    }else{
                                        alert("更新失败");
                                    }
                                }
                            })

                            return false;//禁用表单的默认提交
                        })
                    }
                })

            }else if(obj.event == "del"){
              //如果是删除操作
                var table = layui.table;
                //var status = table.checkStatus("demo");
                //var $ = layui.jquery;
                console.log(table)

                layer.confirm('真的删除吗',function(index){
                    //obj.del(); //删除表格对应行的dom结构。但是刷新后会重新存在
                    //console.log('发送的数据是'+data._id) //进行测试使用
                    //通过ajax与后端通信，来删除数据库中相应的数据
                    console.log("11111111111111111111")
                    console.log(obj.data.sectionId)
                    var id=obj.data.sectionId;
                    $.ajax({
                        url: "/work1/sections/"+obj.data.sectionId,
                        "type":"delete",
                        "contentType":"application/json",
                        //"data": JSON.stringify(obj.data.sectionId),
                        "dataType":"json",
                        "success":function(result){
                            //如果更新成功,关闭弹出层,刷新表格
                            if (result.status == "success") {
                                layer.close(index);
                                layer.msg("删除成功",function(){
                                    table.reload("demo");
                                })
                            }else{
                                alert("删除失败");
                            }
                        }
                    })
                    layer.close(index);
                });
            }
        })
    })
</script>
    <script type="text/html" id="operation">
        <button class='layui-btn layui-btn-primary layui-btn-xs' lay-event="edit">更新</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
<!--        <button class="layui-btn layui-btn-danger layui-btn-xs" type='button' onclick="Remove()">删除</button>-->
    </script>
    <script type="text/html" id="toolbar">
        <button class='layui-btn layui-btn-danger layui-btn-xs' type='button' onclick="handleRemoveAny()">批量删除 <i class="layui-icon layui-icon-delete"/></button>
        <button class="layui-btn layui-btn-normal layui-btn-xs" type="button" onclick="openAddForm()" style="width: 100px">添加 <i class="layui-icon layui-icon-addition"/></button>

        <!-- 用于搜索的表单-->
        <div class="layui-inline">
            <form action="" class="layui-form">
                <div class="layui-input-inline">
                    <input type="text" name="search" id="search" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button onclick="handleSearch()" type="button" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-search"> </i></button>
                </div>
            </form>

        </div>
    </script>

<script type="text/javascript">

    function handleSearch(){
            // layui.use("table",function(){
            //     var table = layui.table;
            //     var $ = layui.jquery;
            //     table.reload("demo",{
            //         url:"/work1/sections",
            //         where:{
            //             "search":$("#search").val(),
            //             "page":1
            //         }
            //     })
            //     jQuery("#query").val(search);
            // })
            layui.use("table",function(){
            var table = layui.table;
            var search = jQuery("#query").val();
            console.log(search)
            //2 根据条件重新加载表格
            table.reload("demo",{
                url:"/work1/sections",
                where:{
                    "search":search
                }
            })
            jQuery("#query").val(search);
        })
    }
    function openAddForm(){
        layui.use(["table","form","layer"],function(){
            var layer = layui.layer;
            var $ = layui.jquery;
            var form = layui.form;
            var table = layui.table;
            layer.open({
                type:1,
                content:$("#addForm").html(),
                success:function(layerObj,index){
                    //该函数在弹出层弹出成功后立刻执行
                    //在该函数中执行对表单和日期组件的手动渲染
                    form.render("radio","addForm");
                    // laydate.render({
                    //     elem:"#add-birthday",
                    //     type:"datetime",//控件选择类型 year month date time datetime
                    //     format:"yyyy-MM-dd HH:mm:ss",//日期格式
                    //     value:new Date(),//初始值
                    //     trigger: 'click'//触发方式
                    // });

                    //监听表单的提交事件
                    form.on("submit(go)",function(data){
                        console.log(data);
                        //data.field 表单数据转换为json的对象
                        $.ajax({
                            url:"/work1/sections",
                            type:"post",
                            data:JSON.stringify(data.field),
                            contentType: "application/json",
                            dataType: "json",
                            success:function(result){
                                console.log(result);
                                if (result.status == "success") {
                                    //关闭弹出层
                                    layer.close(index);
                                    //刷新表格
                                    table.reload("demo");
                                }else{
                                    alert("添加失败");
                                }
                            }
                        })
                        return false;//禁用默认的跳转

                    })
                },
                area:["400px","300px"]
            });
        })
    }


    function handleRemoveAny(){
        // layui.use("table",function(){
        //     var $ = layui.jquery;
        //     var table = layui.table;
        //     var status = table.checkStatus("demo");//根据表格的id获取所有选中的行
        //     //status.data;//所有选中行的数据
        //     var ids = [];
        //     for(var i = 0; i <status.data.length; i++){
        //         console.log(status.data[i]);
        //         ids[i] = status.data[i].sectionId;
        //     }
        //
        //     console.log(ids);
        //     if(ids.length == 0){
        //         alert("没有选中的行");
        //         return;
        //     }
        //    $.ajax({
        //         url:"/work1/sections",
        //         data:JSON.stringify(ids),
        //         type:"delete",
        //         contentType:"application/json",
        //         dataType:"json",
        //         success:function(result){
        //             console.log(result);
        //             if (result.status == "success") {
        //                 //刷新表格
        //                 table.reload("demo");
        //             }else{
        //                 alert("服务器忙,删除失败");
        //             }
        //         }
        //     })
        // })
        layui.use("table",function(){
            var $ = layui.jquery;
            var table = layui.table;
            var status = table.checkStatus("demo");//根据表格的id获取所有选中的行
            //status.data;//所有选中行的数据
            var ids = [];
            for(var i = 0; i <status.data.length; i++){
                console.log(status.data[i]);
                ids[i] = status.data[i].sectionId;
            }

            console.log(ids);
            if(ids.length == 0){
                alert("没有选中的行");
                return;
            }
            $.ajax({
                url:"/work1/sections",
                data:JSON.stringify(ids),
                type:"delete",
                contentType:"application/json",
                dataType:"json",
                success:function(result){
                    console.log(result);
                    if (result.status == "success") {
                        //刷新表格
                        table.reload("demo");
                    }else{
                        alert("服务器忙,删除失败");
                    }
                }
            })
        })
    }
</script>
</body>
</html>